<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title><%= @page_title %> - RpRPG</title>
	<link rel="stylesheet" href="/stylesheets/map.css" type="text/css" media="screen" charset="utf-8">
	<link rel="stylesheet" href="/stylesheets/main.css" type="text/css" media="screen" charset="utf-8">
	<style type="text/css" media="screen">
		#map {
			width: <%= @map.width * 16 %>px;
			height: <%= @map.height * 16 %>px;
			background-image: url('../images/maps/<%= @map.id %>.png');
		}
		#player {
			left: <%= @player.xpos * 16 %>px;
			top: <%= @player.ypos * 16 %>px;
		}
	</style>
	<script type="text/javascript" charset="utf-8">
		function move(e)
		{
			var keynum
			var keychar
			var numcheck

			if(window.event) {
				keynum = e.keyCode
			} else if(e.which) {
				keynum = e.which
			}
			
			switch(keynum){
				case 63232:
					self.location = "./up"
					break
				case 63233:
					self.location = "./down"
					break
				case 63234:
					self.location = "./left"
					break
				case 63235:
					self.location = "./right"
					break
			}
		}
	</script>
</head>
<body onkeypress="move(event)">
	<div id="main">
		<div><%= yield %></div>
		<div><%= link_to "Logout", :controller => "user", :action => "logout" %>
	</div>
</body>
</html>
